<template>
  <div>
    <Top />
    <section class="bg-green-600 flex-col flex items-center justify-center" style="height: 10vh;text-align: center;">
      <div class="container mx-auto px-4">
        <div class="row">
          <div class="col-md-12 text-center">
            <h2 class="text-4xl font-bold text-white">Expert News</h2>
          </div>
        </div>
      </div>
    </section>

    <div class="bg-white py-16">
      <div class="container-1408 pt-4 pb-4">

        <!-- Main Content Layout: Grid with 4 columns -->
        <div class="grid gap-y-4 lg:grid-cols-4 xl:grid-cols-4 md:gap-x-8 md:gap-y-8">

          <!-- Left Sidebar: Platform Dynamics (25% - 1 column) -->
          <div class="lg:col-span-1 border-2 p-6 border-gray-200">
            <div class="mb-6">
              <h2 class="text-xl font-bold border-b-2 pb-4 border-gray-200 text-gray-900 mb-6">Latest Insights</h2>

              <div class="space-y-0">
                <div v-for="(item, idx) in platformList.slice(0, 5)" :key="item.id || idx"
                     @click="goDetail(item.id)"
                     class="border-b-2 border-gray-200 py-4 cursor-pointer hover:bg-gray-50 transition-colors group last:border-0">
                  <div class="flex items-start justify-between group-hover:text-[#2B649C]">
                    <div class="flex-1 pr-4">
                      <p class="text-xs text-gray-500 mb-1">{{ formatDate(item.createTime) }}</p>
                      <h3 class="text-sm font-medium text-gray-900 leading-tight group-hover:text-[#2B649C] transition-colors">
                        {{ item.title }}
                      </h3>
                    </div>
                    <svg class="w-4 h-4 text-gray-400 group-hover:text-[#2B649C] transition-colors flex-shrink-0 mt-1"
                         fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                  </div>
                </div>
              </div>

              <div class="border-t border-gray-200 pt-4 mt-2">
                <button @click="navigateToMore('news')"
                        class="text-sm text-blue-600 hover:text-blue-800 font-medium flex items-center">
                  See All Insights
                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>

          <!-- Featured News (50% - 2 columns) -->
          <div class="lg:col-span-2 px-6 border-r-2 border-gray-200">
            <div class="mb-6 pb-4 border-b-2 border-gray-200">
              <h2 class="text-2xl font-bold text-gray-900">Industry News</h2>
            </div>
            <div v-if="featuredNews" @click="goDetail(featuredNews.id)"
                 class="cursor-pointer group">
              <!-- Featured Image -->
              <div class="relative mb-4 overflow-hidden rounded-lg">
                <img v-if="featuredNews.profileUrl"
                     :src="featuredNews.profileUrl"
                     :alt="featuredNews.title"
                     class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300">
                <div v-else class="w-full h-64 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
                  <span class="text-white text-lg font-medium">Featured News</span>
                </div>

                <!-- Category Badge -->
                <div class="absolute top-4 left-4">
                  <span class="bg-red-600 text-white text-xs font-medium px-2 py-1 rounded">
                    SPECIAL REPORTS
                  </span>
                </div>
              </div>

              <!-- Featured Content -->
              <div>
                <h1 class="text-2xl font-bold text-gray-900 mb-3 leading-tight group-hover:text-blue-600 transition-colors">
                  {{ featuredNews.title }}
                </h1>
                <p class="text-gray-600 text-base leading-relaxed mb-4">
                  {{ featuredNews.summary || 'Comprehensive analysis of industry trends and market developments affecting global business landscape.' }}
                </p>
              </div>
            </div>
          </div>

          <!-- Side News (25% - 1 column) -->
          <div class="lg:col-span-1 pl-6">
                <div class="space-y-8">
                  <div v-for="(item, idx) in sideNews.slice(0, 3)" :key="item.id || idx"
                       @click="goDetail(item.id)"
                       class="cursor-pointer group pb-6 border-b-2 border-gray-100 last:border-b-0 last:pb-0">
                    <!-- Side News Image -->
                    <div class="relative mb-3 overflow-hidden rounded-lg">
                      <img v-if="item.profileUrl"
                           :src="item.profileUrl"
                           :alt="item.title"
                           class="w-full h-32 object-cover group-hover:scale-105 transition-transform duration-300">
                      <div v-else :class="getSideNewsGradient(idx)"
                           class="w-full h-32 flex items-center justify-center">
                        <span class="text-white text-sm font-medium">News {{ idx + 1 }}</span>
                      </div>

                      <!-- Category Badge -->
                      <div class="absolute top-2 left-2">
                        <span :class="getSideNewsBadge(idx)" class="text-white text-xs font-medium px-2 py-1 rounded">
                          {{ getSideNewsCategory(idx) }}
                        </span>
                      </div>
                    </div>

                    <!-- Side News Content -->
                    <div>
                      <h3 class="text-lg font-bold text-gray-900 mb-2 leading-tight group-hover:text-blue-600 transition-colors">
                        {{ item.title }}
                      </h3>
                      <p class="text-sm text-gray-600 leading-relaxed mb-2">
                        {{ item.summary || 'Latest developments in industry analysis and market insights.' }}
                      </p>
                      <div class="flex items-center text-xs text-gray-500">
                        <span>{{ formatDate(item.createTime) }}</span>
                        <svg class="w-3 h-3 ml-2 group-hover:text-blue-600 transition-colors"
                             fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
            </div>
          </div>

        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script setup>
// 页面元数据
definePageMeta({
  layout: false
})

import { onMounted, ref } from 'vue'
import { articleApi } from '~/public/utils/api'

// 列表数据
const platformList = ref([])
const industryList = ref([])
const featuredNews = ref(null)
const sideNews = ref([])

async function fetchPlatform() {
  try {
    const res = await articleApi.getList({ pageSize: 6, pageNum: 1, categoryId: 1 })
    const rows = res?.rows || res?.data?.rows || []
    platformList.value = rows.map(r => ({
      id: r.id || r.articleId,
      title: r.title || '',
      createTime: r.createTime || ''
    }))
  } catch (e) {
    platformList.value = []
  }
}

async function fetchIndustry() {
  try {
    const res = await articleApi.getList({ pageSize: 6, pageNum: 1, categoryId: 2 })
    const rows = res?.rows || res?.data?.rows || []
    const mappedData = rows.map(r => ({
      id: r.id || r.articleId,
      title: r.title || '',
      summary: r.summary || (typeof r.content === 'string' ? r.content.replace(/<[^>]+>/g, '').slice(0, 120) : ''),
      createTime: r.createTime || '',
      profileUrl: r.profileUrl || r.pictureUrl || r.image || ''
    }))

    // 设置特色新闻（第一条）和侧边新闻（其余2-3条）
    if (mappedData.length > 0) {
      featuredNews.value = mappedData[0]
      sideNews.value = mappedData.slice(1, 4) // 取2-3条作为侧边新闻
    }

    industryList.value = mappedData
  } catch (e) {
    industryList.value = []
    featuredNews.value = null
    sideNews.value = []
  }
}

onMounted(() => {
  fetchPlatform()
  fetchIndustry()
})

// 导航函数
const navigateToMore = (type) => {
  navigateTo(`/member/dynamicsMore?media=${type}`)
}

// 详情跳转
const goDetail = (id) => {
  if (!id) return
  navigateTo(`/article/${id}`)
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('en-GB', {
    day: '2-digit',
    month: 'short',
    year: 'numeric'
  })
}

// 获取侧边新闻渐变背景
const getSideNewsGradient = (index) => {
  const gradients = [
    'bg-gradient-to-br from-green-500 to-teal-600',
    'bg-gradient-to-br from-purple-500 to-pink-600',
    'bg-gradient-to-br from-orange-500 to-red-600'
  ]
  return gradients[index % gradients.length]
}

// 获取侧边新闻徽章样式
const getSideNewsBadge = (index) => {
  const badges = [
    'bg-green-600',
    'bg-purple-600',
    'bg-orange-600'
  ]
  return badges[index % badges.length]
}

// 获取侧边新闻分类
const getSideNewsCategory = (index) => {
  const categories = [
    'EMERGING & ESTABLISHED RISKS',
    'PRODUCT',
    'MARKET ANALYSIS'
  ]
  return categories[index % categories.length]
}

// 设置页面标题
useHead({
  title: 'Latest Dynamics - Carbon Tariff Platform',
  meta: [
    { name: 'description', content: 'Stay updated with the latest carbon tariff news, industry insights, and platform developments' },
    { name: 'keywords', content: 'carbon tariff news, industry dynamics, CBAM updates, latest developments' }
  ]
})
</script>

<style scoped>
/* S&P Global风格的容器 */
.container-1408 {
  max-width: 1408px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

</style>